import { useLoaderData, useSearchParams } from 'react-router-dom'
import { useEffect, useState } from 'react'
import TicketItem from './TicketItem'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
import { getTrainListApi } from '../../../api/train'

// 虚拟列表：步骤1
import {
  List as VirtualizedList,
  AutoSizer,
  WindowScroller
} from 'react-virtualized'

function TicketList() {
  // loader 返回的数据对象中的 list 数组，仅仅是第1页的数据
  const { list } = useLoaderData()
  // 用于分页请求数据的页码值
  const [page, setPage] = useState(1)
  // 大数组中，默认就包含第一页数据
  //  将来，请求到的第2页，第3页，第N页数据，都要追加到这个大数组的末尾
  const [trainList, setTrainList] = useState(list)
  // 获取 URL 中的查询参数
  const [sp] = useSearchParams()

  const [hasMore, setHasMore] = useState(false)
  // 上拉加载更多
  async function loadMore() {
    // 自己实现加载下一页数据的功能
    // 准备接口参数
    const data1 = Object.fromEntries(sp)
    const data2 = { page: page + 1, ...data1 }
    // 请求下一页数据
    const { data: res } = await getTrainListApi(data2)
    // 把新数据拼接到旧数据的末尾
    setTrainList((prev) => [...prev, ...res])
    // 页码值+1
    setPage((prev) => prev + 1)

    // 判断数据是否加载完了
    if (res.length === 0) {
      setHasMore(false)
    }
  }

  // 下拉刷新
  const onRefresh = async () => {
    console.log('触发了下拉刷新')
    const data = Object.fromEntries(sp)
    // 请求第一页数据
    const { data: res } = await getTrainListApi(data)
    // 拿第一页数据，覆盖掉之前的旧列表数据
    setTrainList(res)
    // 把页码值还原成1
    setPage(1)
    // 把是否还有下一页的开关打开，允许上拉加载更多
    setHasMore(true)
  }

  // 步骤3：虚拟列表中，用于渲染每一行数据的那个函数
  function rowRenderer({ index, key, style }) {
    const item = trainList[index]
    if (!item) return

    return (
      <div
        style={style}
        key={key}
      >
        <TicketItem {...item} />
      </div>
    )
  }

  // 侦听 list 的变化，把最新的车次列表数据，更新到 trainList 中
  useEffect(() => {
    // 重置滚动条的位置，让滚动条回到页面顶部
    window.scrollTo({ top: 0 })
    setTrainList(list)
    setPage(1)
    setHasMore(true)
  }, [list])

  return (
    <div>
      {/* 下拉刷新组件 */}
      <PullToRefresh onRefresh={onRefresh}>
        {/* 虚拟列表：步骤2 */}
        <WindowScroller>
          {({ height, scrollTop, isScrolling }) => (
            <AutoSizer disableHeight>
              {({ width }) => (
                <VirtualizedList
                  autoHeight
                  // 告诉虚拟列表，当前列表中总共需要渲染多少条数据
                  rowCount={trainList.length}
                  // 自定义渲染每一行的结构
                  rowRenderer={rowRenderer}
                  width={width}
                  height={height}
                  // 提供每一行的高度
                  rowHeight={85}
                  overscanRowCount={10}
                  isScrolling={isScrolling}
                  scrollTop={scrollTop}
                />
              )}
            </AutoSizer>
          )}
        </WindowScroller>
      </PullToRefresh>

      {/* 无限滚动组件 */}
      <InfiniteScroll
        loadMore={loadMore}
        hasMore={hasMore}
      />
    </div>
  )
}

export default TicketList
